---
type: tutorial
title: 'Zurück an Land. Verwandle deinen Blog von Tag zu Nacht – ganz ohne Island!'
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Erstelle einen Schalter für den Hell-/Dunkelmodus nur mit JavaScript und CSS
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du interaktive Astro-Islands erstellen kannst, vergiss nicht: Du kannst auch mit reinem JavaScript und CSS schon sehr weit kommen!

Lass uns ein klickbares Symbol bauen, mit dem deine Nutzer zwischen Hell- und Dunkelmodus umschalten können – mithilfe eines weiteren `<script>`-Tags für Interaktivität … ganz ohne Framework-JavaScript im Browser.

<PreCheck>
  - einen interaktiven Theme-Toggle nur mit JavaScript und CSS zu erstellen
  - so wenig JavaScript wie möglich an den Browser zu senden!
</PreCheck>

## Füge ein Symbol zum Umschalten des Themes hinzu und style es

<Steps>
1. Erstelle eine neue Datei unter `src/components/ThemeIcon.astro` und füge folgenden Code ein:

    ```astro title="src/components/ThemeIcon.astro"
    ---
    ---
    <button id="themeToggle" aria-label="Theme umschalten">
      <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
        <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
      </svg>
    </button>

    <style>
      #themeToggle {
        border: 0;
        background: none;
      }
      .sun { fill: black; }
      .moon { fill: transparent; }

      :global(.dark) .sun { fill: transparent; }
      :global(.dark) .moon { fill: white; }
    </style>
    ```

2. Importiere die `<ThemeIcon />`-Komponente in `Header.astro`, damit sie auf allen Seiten angezeigt wird. Wickle `<ThemeIcon />` und `<Menu />` in ein gemeinsames `<div>`-Element, um sie gemeinsam zu stylen, und füge ein `<style>`-Tag hinzu, wie unten gezeigt, um das Layout zu verbessern.

    ```astro title="src/components/Header.astro" ins={4,8-9,11,16-21}
    ---
    import Menu from './Menu.astro';
    import Navigation from './Navigation.astro';
    import ThemeIcon from './ThemeIcon.astro';
    ---
    <header>
      <nav>
        <div>
          <ThemeIcon />
          <Menu />
        </div>
        <Navigation />
      </nav>
    </header>

    <style>
      div {
        display: flex;
        justify-content: space-between;
      }
    </style>
    ```

3. Öffne deine Browser-Vorschau unter `http://localhost:4321`, um das Symbol jetzt auf allen Seiten zu sehen. Du kannst es anklicken, aber das Skript für die Interaktivität fehlt noch.
</Steps>

## Füge CSS-Styles für den Dunkelmodus hinzu

Wähle alternative Farben für den Dunkelmodus.

<Steps>
1. Definiere in `global.css` einige dunkle Styles. Du kannst eigene wählen oder diese übernehmen:

    ```css title="src/styles/global.css"
    html.dark {
      background-color: #0d0950;
      color: #fff;
    }

    .dark .menu {
      background-color: #fff;
      color: #000;
    }

    .dark .nav-links a:hover,
    .dark .nav-links a:focus {
      color: #0d0950;
    }

    .dark .nav-links a {
      color: #fff;
    }

    .dark a {
      color: #ff9776;
    }
    ```
</Steps>

:::tip[Farben auf Barrierefreiheit prüfen]
Wenn du deiner Seite einen Dunkelmodus hinzufügst, kann es sein, dass einige Farben angepasst werden müssen.

Überprüfe deine Seite immer nach dem Hinzufügen neuer Styles und Farben und passe sie gegebenenfalls an! Das kann bedeuten, dass du weitere `.dark`-CSS-Regeln hinzufügst oder Farben so änderst, dass sie in beiden Themes gut funktionieren.

Verwende am besten Tools zur Barrierefreiheitsprüfung, z. B. einen Kontrast-Checker, oder prüfe deine Seite mit einer Browser-Erweiterung auf mögliche Probleme.
:::

## Füge clientseitige Interaktivität hinzu

Um Interaktivität in einer Astro-Komponente zu ermöglichen, kannst du ein `<script>`-Tag verwenden. Dieses Skript kann das aktuelle Theme aus `localStorage` prüfen und setzen sowie das Theme beim Klicken auf das Symbol umschalten. 

<Steps>
1. Füge nach dem `<style>`-Tag in `src/components/ThemeIcon.astro` folgendes `<script>`-Tag hinzu:

    ```astro title="src/components/ThemeIcon.astro" ins={9-38}
    <style>
      .sun { fill: black; }
      .moon { fill: transparent; }

      :global(.dark) .sun { fill: transparent; }
      :global(.dark) .moon { fill: white; }
    </style>

    <script is:inline>
      const theme = (() => {
        const localStorageTheme = localStorage?.getItem("theme") ?? "";
        if (["dark", "light"].includes(localStorageTheme)) {
          return localStorageTheme;
        }
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
          return "dark";
        }
          return "light";
      })();
          
      if (theme === "light") {
        document.documentElement.classList.remove("dark");
      } else {
        document.documentElement.classList.add("dark");
      }

      window.localStorage.setItem("theme", theme);

      const handleToggleClick = () => {
        const element = document.documentElement;
        element.classList.toggle("dark");
        
        const isDark = element.classList.contains("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
      }

      document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
    </script>
    ```

2. Öffne wieder deine Browser-Vorschau unter `http://localhost:4321` und klicke auf das Theme-Symbol. Überprüfe, ob du zwischen Hell- und Dunkelmodus wechseln kannst.
</Steps>

<Box icon="question-mark">

### Teste dein Wissen

Ordne zu, ob jede der folgenden Aussagen Astro-`<script>`-Tags, UI-Framework-Komponenten oder beide beschreibt.

1. Sie ermöglichen es dir, interaktive UI-Elemente zu deiner Website hinzuzufügen.

    <MultipleChoice>
      <Option>
        Astro-`<script>`-Tags
      </Option>
      <Option>
        UI-Framework-Komponenten
      </Option>
      <Option isCorrect>
        beide
      </Option>
    </MultipleChoice>

2. Sie erzeugen statische Elemente auf deiner Seite, es sei denn, du fügst eine `client:`-Direktive hinzu, um ihr JavaScript an den Client zu senden und im Browser auszuführen.

    <MultipleChoice>
      <Option>
        Astro-`<script>`-Tags
      </Option>
      <Option isCorrect>
        UI-Framework-Komponenten
      </Option>
      <Option>
        beide
      </Option>
    </MultipleChoice>

3. Sie ermöglichen es dir, ein neues Framework auszuprobieren, ohne ein komplett neues Projekt mit diesem Tech-Stack starten zu müssen.

    <MultipleChoice>
      <Option>
        Astro-`<script>`-Tags
      </Option>
      <Option isCorrect>
        UI-Framework-Komponenten
      </Option>
      <Option>
        beide
      </Option>
    </MultipleChoice>

4. Sie ermöglichen es dir, Code aus anderen Frameworks wiederzuverwenden und häufig direkt in deine Seite einzufügen.

    <MultipleChoice>
      <Option>
        Astro-`<script>`-Tags
      </Option>
      <Option isCorrect>
        UI-Framework-Komponenten
      </Option>
      <Option>
        beide
      </Option>
    </MultipleChoice>

5. Sie ermöglichen dir, Interaktivität hinzuzufügen, ohne andere JavaScript-Frameworks kennen oder lernen zu müssen.

    <MultipleChoice>
      <Option isCorrect>
        Astro-`<script>`-Tags
      </Option>
      <Option>
        UI-Framework-Komponenten
      </Option>
      <Option>
        beide
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann JavaScript für Interaktivität verwenden, ohne ein Framework hinzuzufügen.
</Checklist>
</Box>

### Ressourcen

- [Clientseitige `<script>`-Tags in Astro](/de/guides/client-side-scripts/)
